import React from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
export default function Input(props) {
  // extra 右侧内容
  // onExtraClick给右侧内容绑定的点击事件
  // ...rest剩余参数
  const { onKeyUp, className, extra, onExtraClick, ...rest } = props
  return (
    <div className={classNames(styles.root, className)}>
      <input
        // 发送数据给父组件
        onKeyUp={onKeyUp}
        className="input"
        {...rest}
      />
      {extra && (
        <div className="extra" onClick={onExtraClick}>
          {extra}
        </div>
      )}
    </div>
  )
}
